window.addEventListener('load', function () {
    var back_img = document.querySelector('.back_img');
    var back_imgwidth = back_img.clientWidth;

    window.onresize = function () {
        // var normalWidth = window.innerWidth;
        // console.log(normalWidth);
        back_imgwidth = back_img.clientWidth;
    }
    var ul = back_img.querySelector('ul');
    var banner_dots = document.querySelector('.banner_dots');
    var arrowhead_left = document.querySelector('.arrowhead_left');
    var arrowhead_right = document.querySelector('.arrowhead_right');

    //创建小圆点
    for (var i = 0; i < ul.children.length; i++) {
        var span = document.createElement('span');
        span.setAttribute('index', i);
        banner_dots.appendChild(span);
        //每创建一个span就给它进行注册事件
        span.addEventListener('click', function () {
            for (var i = 0; i < banner_dots.children.length; i++) {
                banner_dots.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -index * back_imgwidth);
        })
    }
    banner_dots.children[0].className = 'current';
    //给span注册事件写在外面同样可以
    // for (var i = 0; i < banner_dots.children.length; i++) {
    //     banner_dots.children[i].addEventListener('click', function () {
    //         for (var i = 0; i < banner_dots.children.length; i++) {
    //             banner_dots.children[i].className = '';
    //         }
    //         this.className = 'current';
    //         var index = this.getAttribute('index');
    //         num = index;
    //         circle = index;
    //         animate(ul, -index * back_imgwidth);
    //     })
    // }
    var first = ul.children[0].cloneNode(true);
    //克隆第一张图片，深克隆
    ul.appendChild(first);
    //num记录播放页面
    var num = 0;
    //circle记录圆点
    var circle = 0;
    // var flag = true;
    //节流

    arrowhead_right.addEventListener('click', function () {
        // if (flag) {
        //     flag = false;
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;

        animate(ul, -num * back_imgwidth//, function () {
            //     flag = true;
            // }
        );

        circle++;
        if (circle == banner_dots.children.length) {
            circle = 0;
        }
        circleChange();
        // }

    });

    arrowhead_left.addEventListener('click', function () {

        // if (flag) {
        //     flag = false;
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * back_imgwidth + 'px';

        }
        num--;
        animate(ul, -num * back_imgwidth//, function () {
            //     flag = true;
            // }
        );
        // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle--;
        // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
        if (circle < 0) {
            circle = banner_dots.children.length - 1;
        }
        // 调用函数
        circleChange();
        // }
    });

    function circleChange() {
        // 先清除其余小圆圈的current类名
        for (var i = 0; i < banner_dots.children.length; i++) {
            banner_dots.children[i].className = '';
        }
        // 留下当前的小圆圈的current类名
        banner_dots.children[circle].className = 'current';
    }

    var timer = setInterval(function () {
        //手动调用点击事件
        arrowhead_right.click();
    }, 10000);

});

